{"ast":null,"code":"var _jsxFileName = \"/data/messenger.client/src/components/Carousel/index.tsx\",\n  _s = $RefreshSig$();\nimport React from 'react';\nimport { FaChevronLeft, FaChevronRight } from 'react-icons/fa';\nimport classNames from \"classnames\";\nimport './Carousel.scss';\nimport { jsxDEV as _jsxDEV } from \"react/jsx-dev-runtime\";\nconst Carousel = _ref => {\n  _s();\n  let {\n    children,\n    width,\n    customBackground\n  } = _ref;\n  const [items, setItems] = React.useState([]);\n  const [offset, setOffset] = React.useState(0);\n  const handleLeftArrowClick = () => {\n    setOffset(currentOffset => {\n      return Math.min(currentOffset + width, 0);\n    });\n  };\n  const handleRightArrowClick = () => {\n    setOffset(currentOffset => {\n      const maxOffset = -(width * (items.length - 1));\n      return Math.max(currentOffset - width, maxOffset);\n    });\n  };\n  React.useEffect(() => {\n    setItems(React.Children.map(children, (child, index) => {\n      return /*#__PURE__*/React.cloneElement(child, {\n        style: {\n          height: '100%',\n          minWidth: `${width}px`,\n          maxWidth: `${width}px`,\n          background: index === 0 ? customBackground : ''\n        }\n      });\n    }));\n  }, []);\n  return /*#__PURE__*/_jsxDEV(\"div\", {\n    className: classNames(\"carousel-mainContainer\", {\n      \"carousel-mainContainer--lopped\": offset !== 0 || offset !== -(width * (items.length - 1))\n    }),\n    children: [offset !== 0 && /*#__PURE__*/_jsxDEV(FaChevronLeft, {\n      className: \"arrow\",\n      onClick: handleLeftArrowClick\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 46,\n      columnNumber: 30\n    }, this), /*#__PURE__*/_jsxDEV(\"div\", {\n      className: \"carousel-mainContainer-window\",\n      children: /*#__PURE__*/_jsxDEV(\"div\", {\n        className: \"all-items-container\",\n        style: {\n          transform: `translateX(${offset}px)`\n        },\n        children: items\n      }, void 0, false, {\n        fileName: _jsxFileName,\n        lineNumber: 48,\n        columnNumber: 17\n      }, this)\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 47,\n      columnNumber: 13\n    }, this), offset !== -(width * (items.length - 1)) && /*#__PURE__*/_jsxDEV(FaChevronRight, {\n      className: \"arrow\",\n      onClick: handleRightArrowClick\n    }, void 0, false, {\n      fileName: _jsxFileName,\n      lineNumber: 56,\n      columnNumber: 58\n    }, this)]\n  }, void 0, true, {\n    fileName: _jsxFileName,\n    lineNumber: 43,\n    columnNumber: 9\n  }, this);\n};\n_s(Carousel, \"qLWpMKFCM4MWrLAsoJVcK8abWDg=\");\n_c = Carousel;\nexport default Carousel;\nvar _c;\n$RefreshReg$(_c, \"Carousel\");","map":{"version":3,"names":["React","FaChevronLeft","FaChevronRight","classNames","Carousel","children","width","customBackground","items","setItems","useState","offset","setOffset","handleLeftArrowClick","currentOffset","Math","min","handleRightArrowClick","maxOffset","length","max","useEffect","Children","map","child","index","cloneElement","style","height","minWidth","maxWidth","background","transform"],"sources":["/data/messenger.client/src/components/Carousel/index.tsx"],"sourcesContent":["import React from 'react';\nimport { FaChevronLeft, FaChevronRight } from 'react-icons/fa';\nimport classNames from \"classnames\";\nimport './Carousel.scss';\nconst Carousel = ({children, width, customBackground}: {\n    children: any;\n    width: number;\n    customBackground?: string;\n}) => {\n    const [items, setItems] = React.useState<React.ReactNode[]>([]);\n    const [offset, setOffset] = React.useState<number>(0);\n\n    const handleLeftArrowClick = () => {\n        setOffset((currentOffset) => {\n            return Math.min(currentOffset + width, 0);\n        });\n    }\n\n    const handleRightArrowClick = () => {\n        setOffset((currentOffset) => {\n            const maxOffset = -(width * (items.length - 1));\n\n            return Math.max(currentOffset - width, maxOffset);\n        });\n    }\n\n    React.useEffect(() => {\n        setItems(\n            React.Children.map(children, (child, index) => {\n                return React.cloneElement(child, {\n                    style: {\n                        height: '100%',\n                        minWidth: `${width}px`,\n                        maxWidth: `${width}px`,\n                        background: (index === 0)? customBackground:''\n                    }\n                });\n            })\n        );\n    }, []);\n\n    return (\n        <div className={classNames(\"carousel-mainContainer\", {\n            \"carousel-mainContainer--lopped\": offset !== 0 || offset !== -(width * (items.length - 1))\n        })}>\n            {offset !== 0 && <FaChevronLeft className=\"arrow\" onClick={handleLeftArrowClick}/>}\n            <div className=\"carousel-mainContainer-window\">\n                <div className=\"all-items-container\"\n                    style={{\n                        transform: `translateX(${offset}px)`,\n                    }}\n                >\n                    {items}\n                </div>\n            </div>\n            {offset !== -(width * (items.length - 1)) && <FaChevronRight className=\"arrow\" onClick={handleRightArrowClick}/>}\n        </div>\n    );\n}\n\nexport default Carousel;"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,aAAa,EAAEC,cAAc,QAAQ,gBAAgB;AAC9D,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAO,iBAAiB;AAAC;AACzB,MAAMC,QAAQ,GAAG,QAIX;EAAA;EAAA,IAJY;IAACC,QAAQ;IAAEC,KAAK;IAAEC;EAIpC,CAAC;EACG,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGT,KAAK,CAACU,QAAQ,CAAoB,EAAE,CAAC;EAC/D,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAGZ,KAAK,CAACU,QAAQ,CAAS,CAAC,CAAC;EAErD,MAAMG,oBAAoB,GAAG,MAAM;IAC/BD,SAAS,CAAEE,aAAa,IAAK;MACzB,OAAOC,IAAI,CAACC,GAAG,CAACF,aAAa,GAAGR,KAAK,EAAE,CAAC,CAAC;IAC7C,CAAC,CAAC;EACN,CAAC;EAED,MAAMW,qBAAqB,GAAG,MAAM;IAChCL,SAAS,CAAEE,aAAa,IAAK;MACzB,MAAMI,SAAS,GAAG,EAAEZ,KAAK,IAAIE,KAAK,CAACW,MAAM,GAAG,CAAC,CAAC,CAAC;MAE/C,OAAOJ,IAAI,CAACK,GAAG,CAACN,aAAa,GAAGR,KAAK,EAAEY,SAAS,CAAC;IACrD,CAAC,CAAC;EACN,CAAC;EAEDlB,KAAK,CAACqB,SAAS,CAAC,MAAM;IAClBZ,QAAQ,CACJT,KAAK,CAACsB,QAAQ,CAACC,GAAG,CAAClB,QAAQ,EAAE,CAACmB,KAAK,EAAEC,KAAK,KAAK;MAC3C,oBAAOzB,KAAK,CAAC0B,YAAY,CAACF,KAAK,EAAE;QAC7BG,KAAK,EAAE;UACHC,MAAM,EAAE,MAAM;UACdC,QAAQ,EAAG,GAAEvB,KAAM,IAAG;UACtBwB,QAAQ,EAAG,GAAExB,KAAM,IAAG;UACtByB,UAAU,EAAGN,KAAK,KAAK,CAAC,GAAGlB,gBAAgB,GAAC;QAChD;MACJ,CAAC,CAAC;IACN,CAAC,CAAC,CACL;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,oBACI;IAAK,SAAS,EAAEJ,UAAU,CAAC,wBAAwB,EAAE;MACjD,gCAAgC,EAAEQ,MAAM,KAAK,CAAC,IAAIA,MAAM,KAAK,EAAEL,KAAK,IAAIE,KAAK,CAACW,MAAM,GAAG,CAAC,CAAC;IAC7F,CAAC,CAAE;IAAA,WACER,MAAM,KAAK,CAAC,iBAAI,QAAC,aAAa;MAAC,SAAS,EAAC,OAAO;MAAC,OAAO,EAAEE;IAAqB;MAAA;MAAA;MAAA;IAAA,QAAE,eAClF;MAAK,SAAS,EAAC,+BAA+B;MAAA,uBAC1C;QAAK,SAAS,EAAC,qBAAqB;QAChC,KAAK,EAAE;UACHmB,SAAS,EAAG,cAAarB,MAAO;QACpC,CAAE;QAAA,UAEDH;MAAK;QAAA;QAAA;QAAA;MAAA;IACJ;MAAA;MAAA;MAAA;IAAA,QACJ,EACLG,MAAM,KAAK,EAAEL,KAAK,IAAIE,KAAK,CAACW,MAAM,GAAG,CAAC,CAAC,CAAC,iBAAI,QAAC,cAAc;MAAC,SAAS,EAAC,OAAO;MAAC,OAAO,EAAEF;IAAsB;MAAA;MAAA;MAAA;IAAA,QAAE;EAAA;IAAA;IAAA;IAAA;EAAA,QAC9G;AAEd,CAAC;AAAA,GAtDKb,QAAQ;AAAA,KAARA,QAAQ;AAwDd,eAAeA,QAAQ;AAAC;AAAA"},"metadata":{},"sourceType":"module"}